<template>
	<CustomPopup class="cascader-select-popup" :key='key' :title="title" :showPickerDlg="showPickerDlg" position="bottom"
		@close="onCancel" @reset="onReset" @confirm="onConfirm">
		
		<CustomSelectPanel ref="uSelect" :value="selectValue" height="100%" :multiple="multiple" :color="color" :dataList="dataList"
			:props="finalProps" @changeCheck='changeSelect' />
			
			<u-empty style="margin: auto 0;" text="暂无数据" mode="list" v-if="dataList.length <= 0"></u-empty>
	</CustomPopup>
</template>

<script>
	import CustomPopup from '../CustomPopup/index.vue';
	import CustomSelectPanel from '../CustomSelectPanel/index.vue';

	const DEFAULT_PROPS = {
		text: 'name',
		value: 'id',
		disabled: undefined,
		pageSize: 20
	};

	export default {
		name: 'selectPopup',
		props: {
			title: {
				type: String,
				default: '标题'
			},
			value: {
				type: [Number, String, Array]
			},
			showPickerDlg: {
				type: Boolean,
				default: false
			},
			// 是否多选
			multiple: {
				type: Boolean,
				default: false
			},
			// 选中颜色
			color: {
				type: String
			},
			// 列表数据
			dataList: {
				type: [Array, Function],
				default: () => []
			},
			props: {
				type: Object,
				default: () => {
					return {
						...DEFAULT_PROPS
					}
				}
			}
		},
		components: {
			CustomPopup,
			CustomSelectPanel
		},
		data() {
			return {
				selectValue: undefined,
				key:0
			}
		},
		methods: {
			changeSelect (val) {
				this.selectValue = val;
			},
			onCancel() {
				this.$emit('close');
			},
			onConfirm() {
				this.$emit('input', this.selectValue);
				this.$emit('close');
			},
			onReset() {
				this.selectValue = '';
			}
		},
		computed: {
			finalProps() {
				return {
					...DEFAULT_PROPS,
					...this.props
				}
			}
		},
		watch: {
			value: {
				handler(val) {
					this.selectValue = val;
				},
				immediate: true
			}
		}
	}
</script>

<style scoped>
</style>